<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>MDL Radio Demo</title>
    <script src="assets/material-design-lite.css.js" charset="utf-8"></script>
    <style type="text/css">
    .surface {
      box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
      0px 1px 1px 0px rgba(0, 0, 0, 0.14),
      0px 1px 3px 0px rgba(0, 0, 0, 0.12);

      position: relative;
    }
     section {
       margin: 48px;
     }
     body {
       font-family: sans-serif;
     }
     button {
       display: block;
       margin: 16px 0;
     }
     .mdl-radio {
       margin: 8px;
     }
     .mdl-radio span {
       display: inline-block;
       line-height: 20px;
       margin-left: 4px;
       vertical-align: top;
     }
    </style>
  </head>
  <body>
    <main>
      <section>
        <label for="radio1" class="mdl-radio">
          <input class="mdl-radio__input" type="radio"
                 id="radio1"
                 checked
                 name="myVariable">
          <div class="mdl-radio__container">
            <div class="mdl-radio__outer-circle"></div>
            <div class="mdl-radio__inner-circle"></div>
            <div class="mdl-ink-ripple"></div>
          </div>
          <span>My Radio Button 1</span>
        </label>

        <label for="radio2" class="mdl-radio">
          <input class="mdl-radio__input" type="radio"
                 id="radio2"
                 name="myVariable">
          <div class="mdl-radio__container">
            <div class="mdl-radio__outer-circle"></div>
            <div class="mdl-radio__inner-circle"></div>
            <div class="mdl-ink-ripple"></div>
          </div>
          <span>My Radio Button 2</span>
        </label>
        <button id="disable">Disable</button>
      </section>
    </main>
    <script src="assets/material-design-lite.js" charset="utf-8"></script>
    <script>
      (function(global) {
        'use strict';
        var radios = document.querySelectorAll('.mdl-radio');
        var components = []
        for (var i = 0; i < radios.length; i++) {
          components.push(new global.mdl.Radio(radios[i]));
        }
        var disable = document.getElementById('disable');
        disable.addEventListener('click', function() {
          for (var i = 0; i < components.length; i++) {
            components[i].disabled = !components[i].disabled;
          }
        });
      })(this);
    </script>
  </body>
</html>
